<template>
  <div class="balance">
    <div class="balance-aq" @click="antequeTether('anteque')">
      <el-row>
        <el-col :span="2">
          <img src="@/assets/logo.png" alt="Picture loading..." />
        </el-col>
        <el-col :span="10">
          <div class="aq-left">
            <p class="aq-token">Anteque (AQ)</p>
            <p class="aq-tokal">
              <i class="el-icon-sugar"></i>
              USD 0.1
            </p>
            <p class="aq-avai">Available</p>
            <p class="aq-avai">Frozen</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="aq-right">
            <p class="aq-token">≈ USD {{avaliableAq}}</p>
            <p class="aq-tokal">{{rateAq}}</p>
            <p class="aq-avai">{{assetsList.assert_avaliable_aq}}</p>
            <p class="aq-avai">{{assetsList.assert_frozen_aq}}</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="balance-aq" @click="antequeTether('tether')">
      <el-row>
        <el-col :span="2">
          <img src="@/assets/logo.png" alt="Picture loading..." />
        </el-col>
        <el-col :span="10">
          <div class="aq-left">
            <p class="aq-token">Tether (USDT ERC-20)</p>
            <p class="aq-tokal">
              <i class="el-icon-sugar"></i>
              USD 0.1
            </p>
            <p class="aq-avai">Available</p>
            <p class="aq-avai">Frozen</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="aq-right">
            <p class="aq-token">≈ USD {{avaliableUsd}}</p>
            <p class="aq-tokal">{{rateUsd}}</p>
            <p class="aq-avai">{{assetsList.assert_avaliable_usdt}}</p>
            <p class="aq-avai">{{assetsList.assert_frozen_usdt}}</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { assetList } from '@/api/assets'
export default {
  props:['assetInfo'],
  data() {
    return {
      assetsList:'',
      avaliableAq:0,
      rateAq: 0,
      avaliableUsd:0,
      rateUsd: 0
    }
  },
  methods: {
    /**
     * @name: 查看Anteque-Tether 详情
     * ----------------------------- 
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    antequeTether(path) {
      this.$router.push({
        path: path
      })
    },
    /**
     * @name: 资产列表
     * ----------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    async assetListIifo() {
      const {data} = await assetList()
      if (data) {
       this.avaliableAq = data.assert_avaliable_aq + data.assert_frozen_aq
       this.rateAq = this.avaliableAq * (data.aq_rate_usd)
       this.avaliableUsd = data.assert_frozen_usdt + data.assert_avaliable_usdt
       this.rateUsd = this.avaliableUsd * (data.usdt_rate_usd)
       this.assetsList = data
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.assetListIifo()
    })
  }
};
</script>

<style lang="less" scoped>
.balance {
  .balance-aq {
    margin-top: 30px;
    background: #fff;
    padding: 20px 30px;
    border-radius: 10px;
    cursor: pointer;
    img {
      width: 60px;
      height: 60px;
      display: inline-block;
    }
    .el-button {
      width: 320px;
      font-size: 28px;
      i {
        font-size: 18px;
      }
    }
    .aq-token {
      color: #050505;
      font-size: 26px;
      font-weight: 600;
      display: inline-block;
    }
    .aq-tokal {
      color: #bdbcbc;
      font-size: 18px;
      padding: 15px 0px;
    }
    .aq-avai {
      color: #bdbcbc;
      font-size: 16px;
      padding: 5px 0px;
    }
    .aq-left {
    }
    .aq-right {
      text-align: right;
      padding-right: 50px;
    }
  }
}
</style>
